<template>
	<div class="app">
		<myNavbar title="退货"></myNavbar>
		<list>
			<cell>
				<div class="shipping_order">
					<div class="shipping_order_Header">
						<text class="shipping_order_Header_Title">商品明细</text>
					</div>
					<div class="details_order_item" v-for="item in itemList">
						<div class="details_order_item_img">
							<image style="width:170px;height:170px" :src="item.thumbnail"></image>
						</div>
						<div class="details_order_item_content">
							<div class="details_order_item_content_top">
								<text class="details_order_item_title">{{item.name}}</text>
								<div style="display: flex;flex-direction: row">
									<text class="details_order_red_icon">¥</text>
									<text class="details_order_red_font">{{item.price}}</text>
								</div>
							</div>
							<div class="details_order_item_content_bottom">
								<text class="details_order_item_subtitle">{{item.subTitle}}</text>
								<text class="details_order_item_number"> x {{item.quantity}}</text>
							</div>
						</div>
					</div>
				</div>
				<div class="shipping_order">
					<div class="shipping_order_Header">
						<text class="shipping_order_Header_Title">退货地址</text>
					</div>
					<div class="details_address">
						<div class="details_address_top">
							<text class="details_address_name">{{orderForm.consignee}}</text>
							<text class="details_address_phone">{{orderForm.phone}}</text>
                            <div class="details_lines"></div>
                            <text class="details_right_copy" @click="copyAddressClick">复制</text>
						</div>
						<div class="details_address_bottom">
							<text class="details_address_title">{{orderForm.address}}</text>
						</div>
					</div>
				</div>
				<div class="shipping_order">
					<div class="shipping_order_Header">
						<text class="shipping_order_Header_Title">退货信息</text>
					</div>
					<!-- <div class="shippingInfo" style="margin-top: 30px" @click="personnelClick">
                        <text class="shippingInfo_title">配送时间</text>
                        <div class="shippingInfo_box">
                            <div style="display:flex;flex-direction:row;align-item:center">
                                <text class="shippingInfo_subtitle">{{shippingDate}}</text>
                            </div>
                        </div>
                    </div> -->
					<div class="shippingInfo" @click="siteClick" style="margin-top: 30px">
						<text class="shippingInfo_title">退货仓库</text>
						<div class="shippingInfo_box">
							<div style="display:flex;flex-direction:row;align-item:center">
								<text class="shippingInfo_subtitle">{{shopName}}</text>
								<text class="submit_product_details_Icon">&#xe61f;</text>
							</div>
						</div>
					</div>
					<div class="shippingInfo" style="margin-top: 30px" @click="packageClick">
						<text class="shippingInfo_title">退货时间</text>
						<div class="shippingInfo_box">
							<div style="display:flex;flex-direction:row;align-item:center">
								<text class="shippingInfo_subtitle">{{dateValue}}</text>
								<text class="submit_product_details_Icon">&#xe61f;</text>
							</div>
						</div>
					</div>
				</div>
				<div class="isMask_Botton">
                    <button class="isMask_Botton_Box botton_Bg_Color" @click="returnedClick" :text="returnedTitle" :loading="returnedLoad"></button>
                    <button class="isMask_Botton_Box isMask_Botton_bg" @click="saveClick" :text="loadTitle" :loading="loading"></button>
				</div>
			</cell>
		</list>
		<shippingSite v-if="siteType == true" @cencleSite="cencleSite" :shopIndex="shopIndex" @completeSite="completeSite"></shippingSite>
	</div>
</template>

<script>
	const picker = weex.requireModule('picker')
	const storage = weex.requireModule('storage')
	const modal = weex.requireModule('modal')
	import myNavbar from '../../components/myNavbar/myNavbar.vue'
	import shippingSite from '../member/declaration/components/shippingSite'
	// import personnel from '../../pages/member/declaration/components/personnel.vue'
	// import packagebox from '../../components/package/package.vue'
	import {
		find,
		received,
		receivedAndAudit
	} from '../../api/askfor.js';
	const eeui = app.requireModule('eeui');
	export default {
		data() {
			return {
				orderForm: [],
				shopId: '',
				value: 'yyyy-MM-dd',
				itemList: [],
				shippingDate: new Date().getTime(),
				shopName: '',
				shopIndex: 0,
				personnelIndex: 0,
				dateValue: '',
				personnelName: '',
				siteType: false,
				personnelType: false,
				weexDate: [{
					title: '请选择配送日期'
				}],
				packageType: false,
				weexTime: '',
                returnedLoad:false,
                returnedTitle:'退货',
                loading:false,
                loadTitle:'退货并出库'
			}
		},
		components: {
			myNavbar,
			shippingSite
		},
		created() {

			this.initIconFont()
			this.id = app.config.params
		},
		mounted() {
			this.findClick(this.id)
		},
		methods: {
			returnedClick() {
			    var _this = this
				if (this.shopId == '') {
					eeui.alert('请选择退货仓库', function() {

					});
					return
				}
				if (this.dateValue == '') {
					eeui.alert('请选择退货时间', function() {

					});
					return
				}
				let params = {
					shopId:this.shopId,
					orderDate:this.dateValue
				}
                _this.returnedLoad=true;
                _this.returnedTitle='加载中'
				received(this.id,params).then(res=>{
                    _this.returnedLoad=false;
                    _this.returnedTitle='退货'
					storage.setItem('askforReturn', 'return')
					storage.setItem('askDetails', 'true')
					eeui.closePage()
				}).catch(error => {
                    _this.returnedLoad=false;
                    _this.returnedTitle='退货'
                })
			},
			saveClick() {
			    var _this = this
				if (this.shopId == '') {
					eeui.alert('请选择退货仓库', function() {

					});
					return
				}
				if (this.dateValue == '') {
					eeui.alert('请选择退货时间', function() {

					});
					return
				}
				let params = {
					shopId:this.shopId,
					orderDate:this.dateValue
				}
                _this.loading=true;
                _this.loadTitle='加载中'
				receivedAndAudit(this.id,params).then(res=>{
                    _this.loading=false;
                    _this.loadTitle='退货并出库'
					storage.setItem('askforReturn', 'return')
					storage.setItem('askDetails', 'true')
					eeui.closePage()
				}).catch(error => {
                    _this.loading=false;
                    _this.loadTitle='退货并出库'
                })
			},
			findClick(data) {
				var _this = this
				find(data).then(
					res => {
						if (res.type == 'success') {
							_this.orderForm = res.data.askfor
							_this.orderForm.createDate = _this.formatTime(_this.orderForm.createDate)
							_this.orderForm.itemList.forEach(function(item) {
								item.quantity = parseInt(item.quantity)
								item.price = parseFloat(item.price).toFixed(2)
								item.thumbnail = _this.thumbnail(item.thumbnail, 170, 170)
							})
							_this.itemList = _this.orderForm.itemList
						}
					}
				).catch(error => {
				})
			},
			//配送站点
			siteClick() {
				this.siteType = true
			},
			cencleSite() {
				this.siteType = false
			},
			completeSite(data) {
				this.siteType = false
				this.shopId = data.from.id
				this.shopName = data.from.name
				this.shopIndex = data.shopIndex
			},
			packageClick() {
				picker.pickDate({
					value: this.value
				}, event => {
					if (event.result === 'success') {
						this.dateValue = event.data
					}
				})
			},
			cenclePackage() {
				this.packageType = false
			},
            copyAddressClick(){
                eeui.toast('复制成功')
                eeui.copyText(this.orderForm.consignee + this.orderForm.phone  + this.orderForm.address)
            }
		}
	}
</script>
<style lang="css" src="../../style/wx.css" />
<style scoped>
    .app, body {
        background-color: rgba(248, 248, 248, 0.8);
    }
    .app{
        flex: 1;
    }
    .shipping_order {
        width: 690px;
        background-color: rgba(255, 255, 255, 1);
        border-radius: 16px;
        margin-top: 30px;
        margin-left: 30px;
        box-sizing: border-box;
        padding-top: 20px;
        padding-left: 25px;
        padding-right: 25px;
        padding-bottom: 20px;
        overflow: hidden;
    }
    .shipping_order_Header{
        /*margin-top: 20px;*/
    }
    .shipping_order_Header_Title {
        font-size: 32px;
        font-weight: 400;
        color: rgba(26, 26, 30, 1);
    }

	.isMask_Botton_bg{
		margin-top: 20px;
		background-color: #409EFF;
	}
    .details_order_item {
        display: flex;
        flex-direction: row;
        /*margin-bottom: 40px;*/
        margin-top: 20px;
    }

    .details_order_item_img {
        width: 170px;
        height: 170px;
        background: rgba(250, 250, 250, 1);
        border-radius: 4px;
        overflow: hidden;
    }

    .details_order_item_content {
        display: flex;
        flex-direction: column;

        margin-left: 20px;
        position: relative;
    }

    .details_order_item_content_top {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 15px;
    }

    .details_order_item_title {
        font-size: 28px;
        font-weight: 400;
        color: rgba(26, 26, 30, 1);
        line-height: 42px;
        text-overflow: ellipsis;
        lines: 2;
        width: 370px;
    }


    .details_order_item_content_bottom {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
    }

    .details_order_item_subtitle {
        font-size: 24px;
        font-weight: 400;
        color: rgba(26, 26, 30, 1);
        line-height: 36px;
        opacity: 0.5;
    }

    .details_order_item_number {
        font-size: 24px;
        font-weight: 400;
        color: rgba(26, 26, 30, 1);
        line-height: 36px;
        opacity: 0.5;
    }
    .details_order_red_icon {
        font-size: 20px;
        font-weight: 500;
        color: rgba(231, 91, 83, 1);
        line-height: 42px;
    }

    .details_order_red_font {
        font-size: 28px;
        font-weight: 500;
        color: rgba(231, 91, 83, 1);
        line-height: 42px;
    }
    .details_address {
        width: 700px;
        background-color: rgba(255, 255, 255, 1);
        border-radius: 16px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        /*padding-top: 25px;*/
        padding-right: 25px;
        /*padding-bottom: 25px;*/
        margin-top: 20px;
        box-sizing: border-box;
    }

    .details_address_top {
        margin-bottom: 10px;
        display: flex;
        flex-direction: row;
        align-items: center;
    }

    .details_address_name {
        font-size: 30px;
        font-weight: 500;
        color: rgba(26, 26, 30, 1);
    }

    .details_address_phone {
        font-size: 30px;
        font-weight: 500;
        color: rgba(26, 26, 30, 1);
        margin-left: 10px;
    }

    .details_address_bottom {
        display: flex;
        flex-direction: row;
        align-items: center;
    }

    .details_address_title {
        font-size: 28px;
        font-weight: 400;
        width: 650px;
        color: rgba(26, 26, 30, 1);
    }
    .shippingInfo {
        display: flex;
        flex-direction: row;
        align-items: center;
        /*margin-bottom: 20px;*/
    }

    .shippingInfo_title {
        width: 170px;
        display: block;
        font-size: 30px;

    }

    .shippingInfo_box {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: flex-end;
        width: 450px;
        margin-left: 20px;
    }

    .shippingInfo_subtitle {
        font-size: 28px;
        color: rgba(26, 26, 30, 0.3);
    }
    .submit_product_details_Icon {
		font-family: iconfont2;
        font-size: 25px;
        color: #888888;
        padding-top: 2px;
        font-weight: 700;
    }
    .submit_product_details_subtitle {
        font-size: 24px;
        color: rgba(26, 26, 30, 0.3);
        line-height: 26px;
    }
    .isMask_Botton {
        width: 750px;
        /*position: absolute;*/
        /*bottom: 30px;*/
        /*left: 0;*/
        margin-top: 40px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }

    .isMask_Botton_Box {
        width: 690px;
        height: 80px;
        border-radius: 40px;
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        font-size: 32px;
        color: white;
    }

    .isMask_Botton_Title {
        font-size: 30px;
        /* color: white; */
    }

	.order_list_botton {
	    width: 650px;
	    display: flex;
	    flex-direction: row;
	    justify-content: flex-end;
	    align-items: center;
	    margin-top: 20px;
	}

	.order_list_botton_gray {
	    width: 136px;
	    height: 48px;
	    border-style: solid;
	    border-width: 1px;
	    border-color: rgba(126, 128, 136, 0.8);
	    border-radius: 4px;
	    display: flex;
	    justify-content: center;
	    align-items: center;
	    margin-left: 25px;
	}

	.order_list_botton_gray_title {
	    font-size: 24px;
	    font-weight: 400;
	    line-height: 48px;
	    color: rgba(26, 26, 30, 0.5);
	}


	.order_list_botton_red {
	    width: 136px;
	    height: 48px;
	    border-radius: 4px;
	    display: flex;
	    justify-content: center;
	    align-items: center;
	    opacity: 0.8;
	}

	.order_list_botton_red_title {
	    font-size: 24px;
	    font-weight: 400;
	    line-height: 48px;
	}
    .details_lines{
        width: 2px;
        height: 20px;
        background-color: rgba(0,0,0,0.2);
        margin-left: 20px;
    }
    .details_right_copy{
        font-size: 22px;
        color: red;
        margin-left: 20px;
    }
    .details_lines{
        width: 2px;
        height: 28px;
        background-color: rgba(0,0,0,0.2);
        margin-left: 20px;
    }
    .details_right_copy{
        font-size: 28px;
        color: red;
        margin-left: 20px;
    }
</style>
